<!-- 重置登录密码 -->
<template>
    <el-dialog custom-class="reset-lpass"
        v-el-drag-dialog="{drag: true, full: false, resize: false}"
        :visible="true"
        :close-on-click-modal="false"
        @close="closeMd"
        :title="'重置用户登录密码'"
        width="450px">
        <el-form 
            :model="fm.ps"
            :ref="fm.fname"
            :rules="fm.rules"
            :label-width="'100px'"
            @keyup.enter.native="submitFm">
            <el-form-item label="新密码" prop="lpass" required>
                <el-input 
                    v-model="fm.ps.lpass" 
                    type="password"
                    placeholder="请输入新登录密码" 
                    maxlength="18">
                </el-input>
            </el-form-item>

            <el-form-item label="确认密码" prop="reqlpass" required>
                <el-input 
                    v-model="fm.ps.reqlpass" 
                    type="password"
                    placeholder="请确认新密码" 
                    maxlength="18">
                </el-input>
            </el-form-item>

            <el-form-item label="手机号码" prop="lphone" required>
                <el-input 
                    v-model="fm.ps.lphone" 
                    placeholder="登录手机号不能为空" 
                    maxlength="11">
                </el-input>
            </el-form-item>

            <el-form-item label="短信验证码" prop="smsCode" required class="sms-code-item">
                <el-input 
                    v-model="fm.ps.smsCode" 
                    placeholder="请输入短信验证码" 
                    maxlength="6">
                </el-input>
                <el-button 
                    class="sms-btn"
                    type="text" 
                    :disabled="smsBtn.load"
                    :style="{'color': smsBtn.load ? '#666666' : '#2979ff'}" 
                    @click="getSmsCode"
                >{{smsBtn.text}}</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click.native="submitFm" :disabled="fm.sb.load">{{fm.sb.text}}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog';

import * as commonSer from '@/api/services/common.service';
import * as loginService from '@/api/services/login.service';

export default {
  name: 'ResetLpass',
  directives: { elDragDialog },
  data() {
    let valLpass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('新密码不能为空'));
        } else {
          if (!this.FV.isLPass(value)) {
            callback(new Error(this.FV.ERROR_LOGIN_PASS));
          }else if(this.fm.ps.reqlpass && this.fm.ps.lpass != this.fm.ps.reqlpass){
            this.$refs[this.fm.fname].validateField('reqlpass');
          }
          callback();
        }
    };

    let valReqLpass = (rule, value, callback) => {
        if (!value) {
          callback(new Error('确认新密码不能为空'));
        } else {
            if (value !== this.fm.ps.lpass) {
                callback(new Error('确认密码与新密码不一致'));
            }
            callback();
        }
    };
    return {
        // 发送验证码按钮
        smsBtn: {load: false, text: '发送验证码', maxtime: 80, time: 80, timer: null},

        // 修改表单
        fm: {
            fname: "resetLpassFm",
            sb: { load: false, text: "确认重置" },
            ps: {
                // 登录手机号
                lphone: null,
                // 短信验证码
                smsCode: null,
                // 新登录密码
                lpass: null,
                // 确认密码
                reqlpass: null,
            },
            rules: {
                lphone: [ 
                    {required: true, message: '登录手机号不能为空'}, 
                    this.$rules.isPhone('登录手机号格式错误')
                ],
                smsCode: [
                    {required: true, message: '短信验证码不能为空'},
                    {pattern: /^(\w){6,20}$/, message: '只能输入6个数字'}
                ],
                lpass: [ {validator: valLpass, trigger: ['blur', 'change']} ],
                reqlpass: [ {validator: valReqLpass, trigger: ['blur', 'change']} ],
            }
        }
    }
  },
  methods:{
    closeMd(){ // 关闭弹框
        this.$emit('myClick', {state: false});
    },
    // 获取-短信验证码
    getSmsCode(){
      let that = this, U = that.U, FV = that.FV, fm = that.fm, sb = that.smsBtn;

      if(!FV.isPhone(fm.ps.lphone)){
        U.qerror('登录用户手机号为空！');
      }else{
        commonSer.getSmsCode({lphone: fm.ps.lphone}).then(res => {
          if(res.code != 1){
            U.qerror(res.msg);
          }else{
            U.qsuccess(res.msg);
            
            // 清空短信验证码
            fm.ps.smsCode = '';
            U.setSmsBtn(sb);
          }
        });
      }
    },
    // 提交-表单
    submitFm(){
        const that = this, U = that.U, fm = that.fm, ps = U.scopy(fm.ps), sb = fm.sb;
        
        that.$refs[fm.fname].validate((valid) => {
            if (!valid) { return false; } else {
                fm.sb.load = true;
                
                let p = {
                    type: 1, // 重置密码类型 eg:【1】登录密码 【2】支付密码
                    phone: ps.lphone,
                    smsCode: ps.smsCode,
                    newPass: ps.lpass,
                    confirmNewPass: ps.reqlpass,
                };
                loginService.resetLpass(p).then(res => {
                    sb.load = false;
                    
                    if(res.code != 1){
                        U.qerror(res.msg);
                    }else {
                        U.qsuccess(res.msg);

                        that.closeMd();
                    }
                });

                setTimeout(() => { sb.load = false; }, 10000);
            }
        });
    },


  },
 }
</script>